<template>
	<view class="container">
		<uni-card title="订单信息" :is-shadow="false" margin="20rpx 0rpx" :border="false">
			<u-text type="info" :text="orderInfo.pay_status | filterPayStatus(orderInfo.pay_status)"></u-text>
			<u-text type="info" :text="'订单编号：'+orderInfo.order_sn"></u-text>
			<u-text type="info" :text="'联系人：'+orderInfo.user_address.signer_name"></u-text>
			<u-text type="info" :text="'联系电话：'+orderInfo.user_address.signer_mobile"></u-text>
			<u-text type="info"
				:text="'收货地址：'+orderInfo.user_address.province+orderInfo.user_address.city+orderInfo.user_address.district+orderInfo.user_address.address"></u-text>
		</uni-card>
		<uni-card title="配送信息" :is-shadow="false" margin="20rpx 0rpx" :border="false">
			<u-text type="info" :text="'联系人：'+orderInfo.did_info.name"></u-text>
			<u-text type="info" :text="'联系电话：'+orderInfo.did_info.mobile"></u-text>
		</uni-card>
		<uni-section title="商品">
			<template v-slot:right>
				<u-text text="操作" bold size="32rpx"></u-text>
			</template>
		</uni-section>
		<view v-for="(cell,k) in goodsList" :key="cell.id" class="goods__item ">
			<u--text :text="cell.good_info.cate_info" bold margin="0 0 10rpx 0"></u--text>
			<view class="goods-list">
				<image :src="cell.good_info.goods_front_image_url" style="width: 80rpx;height: 80rpx;">
				</image>
				<view class="dis-flex list-desc">
					<u--text :text="cell.good_info.name"></u--text>
					<text style="color: red;">￥{{cell.good_info.good_price}}</text>
				</view>
				<view class="dis-flex list-desc">
					<u--text text="小计" align="center"></u--text>
					<text style="color: red;text-align: center;">￥{{cell.goods_mount}}</text>
				</view>
				<view class="dis-flex list-desc">
					<u--text type="info" align="right" size="10" margin="0 0 6rpx 0"
						:text="cell.good_info.goods_size"></u--text>
					<uni-number-box v-model="cell.goods_num" :min="0" :max="cell.good_info.goods_num"></uni-number-box>
				</view>
			</view>
		</view>
		<uni-section title="商品总价: ">
			<template v-slot:right>
				<u-text :text="'￥'+totalMoney" bold size="32rpx" type="error"></u-text>
			</template>
		</uni-section>
		<view class="submit">
			<button type="primary" @click="submit" class="submit-btn">确认提交</button>
		</view>
		<u-loading-page loading-mode="semicircle" :loading="showLoading"></u-loading-page>
	</view>
</template>

<script>
	import {
		getOrderGoodsDetailApi
	} from '@/api/index.js'
	export default {
		components: {

		},
		data() {
			return {
				showLoading: true,
				goodsList: [],
				orderInfo: {}
			}
		},
		filters: {
			filterPayStatus(status) {
				switch (status) {
					case 'IS_PLACED':
						return '订单状态：已下单';
					case 'RECEIVE_ORDER':
						return '订单状态：已接单';
					case 'IS_REVOKE':
						return '订单状态：已撤销';
					case 'DISTRIBUTION':
						return '订单状态：配送中';
					case 'SIGNED_PAID':
						return '订单状态：签收待支付';
					case 'IS_PAID':
						return '订单状态：已支付';
					default:
						break;
				}
			}
		},
		onLoad(options) {
			console.log(options);
			this.getOrderDetail(options.id)
		},
		computed: {
			// 小计
			subtotal() {
				this.goodsList.forEach(goodsItem => {
					const num = parseFloat(goodsItem.goods_num);
					const price = parseFloat(goodsItem.good_info.good_price);
					if (!isNaN(num) && !isNaN(price)) {
						const subtotal = num * price
						goodsItem.goods_mount = parseFloat(subtotal.toFixed(2))
					}
				});
			},
			// 总价
			totalMoney() {
				let totalPrice = 0;
				this.goodsList.forEach(goodsItem => {
					const num = parseFloat(goodsItem.goods_num);
					const price = parseFloat(goodsItem.good_info.good_price);
					if (!isNaN(num) && !isNaN(price)) {
						totalPrice += num * price;
					}
				});
				return parseFloat(totalPrice.toFixed(2));
			},

		},
		methods: {
			// 获取订单详情
			async getOrderDetail(order_id) {
				const orderInfo = uni.getStorageSync('orderInfo');
				const {
					data: res
				} = await getOrderGoodsDetailApi({
					order_id,
					is_delete: 0
				});
				console.log(res);
				this.goodsList = res;
				this.orderInfo = orderInfo;
				console.log('orderInfo', this.orderInfo.did_info);
				this.showLoading = false;
			},

		}
	}
</script>

<style lang="scss">
	.container {
		width: 92%;
		height: 100%;
		margin: 30rpx auto;
		overflow-y: auto;
	}

	.uni-card__header-content-title {
		font-weight: 600;
		font-size: 32rpx !important;
		color: #000 !important;
	}

	.uni-section {
		margin-bottom: 20rpx;
	}

	.uni-section__content-title {
		font-weight: 600;
		font-size: 32rpx !important;
		color: #000 !important;
	}

	.goods__item {
		// height: 300rpx;
		background-color: #fff;
		padding: 20rpx !important;
		margin-bottom: 20rpx;

		.goods-list {
			display: flex;
			align-items: center;
		}

		image {
			width: 180rpx;
			height: 180rpx;
			border-radius: 15rpx;
		}

		.list-desc {
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10rpx;
			flex: 1;
		}

		.money {
			font-size: 30rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
		}
	}

	.submit {
		width: 100%;
		padding: 50rpx 0 100rpx 0;

		.submit-btn {
			width: 80%;
			background-color: #3c9cff !important;
		}
	}
</style>